<template>
  <div>
    <m-button @click="loading = !loading">主题</m-button>
    <m-button type="warning">警告</m-button>
    <m-button type="info">信息</m-button>
    <div style="margin: 10px;"></div>
    <m-button plain>主题</m-button>
    <m-button type="warning" plain>警告</m-button>
    <m-button type="info" plain>信息</m-button>
    <div style="margin: 10px;"></div>
    <m-button arrow>hover效果</m-button>
    <m-button :loading="loading" arrow @click="clg()">加载状态</m-button>
    <div style="margin: 10px;"></div>
    <m-button disabled>禁用</m-button>
  </div>
  <div>
    <img class="canvas-img" :src="dataUrl" width="400px" alt="">
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { WeCan } from './package/src';


const loading = ref(true);
function clg() {
  console.log('click');
}


const dataUrl = ref('');
const wecan = new WeCan({
  width: 400,
  height: 400,
});
wecan.addText('测试文字', {
  fontSize: 60,
}).dataURL().then((url) => {
  dataUrl.value = url;
});

</script>

<style lang="scss">
.canvas-img {
  width: 400px;
  height: 400px;
  display: block;
  border: 1px solid #ddd;
}
</style>
